<template>
    <div class="content-flex-right">
        <div class="bodyRightTop">
            <div class="rightTopBody">
                <div class="topStateBox">
                    <div>
                        <div
                            :class="[
                                ranking_list.question_num_top == 1
                                    ? 'topStateNum'
                                    : 'topStateNum1'
                            ]"
                        >
                            {{ ranking_list.question_num }}
                            <template v-if="ranking_list.question_num_top == 1">
                                <img
                                    class="iconImg"
                                    src="@/assets/images/result/up.png"
                                />
                            </template>
                            <template v-else>
                                <img
                                    class="iconImg"
                                    src="@/assets/images/result/down.png"
                                />
                            </template>
                        </div>
                        <div class="topStateSubText">做题量</div>
                    </div>
                    <div>
                        <div
                            :class="[
                                ranking_list.accuracy_top == 1
                                    ? 'topStateNum'
                                    : 'topStateNum1'
                            ]"
                        >
                            {{ ranking_list.accuracy }}%
                            <template v-if="ranking_list.accuracy_top == 1">
                                <img
                                    class="iconImg"
                                    src="@/assets/images/result/up.png"
                                />
                            </template>
                            <template v-else>
                                <img
                                    class="iconImg"
                                    src="@/assets/images/result/down.png"
                                />
                            </template>
                        </div>
                        <div class="topStateSubText">正确率</div>
                    </div>
                    <div>
                        <div
                            :class="[
                                ranking_list.duration_top == 1
                                    ? 'topStateNum'
                                    : 'topStateNum1'
                            ]"
                        >
                            {{ ranking_list.duration }}h
                            <template v-if="ranking_list.duration_top == 1">
                                <img
                                    class="iconImg"
                                    src="@/assets/images/result/up.png"
                                />
                            </template>
                            <template v-else>
                                <img
                                    class="iconImg"
                                    src="@/assets/images/result/down.png"
                                />
                            </template>
                        </div>
                        <div class="topStateSubText">活跃时长</div>
                    </div>
                </div>
                <div class="topStateTitle2">昨日学情</div>
                <div class="topStateBox2">
                    <div class="topStateBoxItem">
                        <div class="topStateNum2">
                            {{ oldrank_list.question_num }}
                        </div>
                        <div class="topStateSubText">做题量</div>
                    </div>
                    <div class="topStateBoxItem">
                        <div class="topStateNum2">
                            {{ oldrank_list.accuracy }}%
                        </div>
                        <div class="topStateSubText">正确率</div>
                    </div>
                    <div class="topStateBoxItem">
                        <div class="topStateNum2">
                            {{ oldrank_list.duration }}h
                        </div>
                        <div class="topStateSubText">活跃时长</div>
                    </div>
                </div>
            </div>
            <div class="checkRanking" @click="checkRanking">查看排名</div>
        </div>
        <div class="bodyRightbottom">
            <div class="addBranchBox">
                <span class="addText">+</span>
                <span class="addBranchNum">10</span>
                <img src="@/assets/images/result/live.png" class="branchImg1" />
                <img src="@/assets/images/result/ok.png" class="branchImg2" />
            </div>
            <div class="allBranch">你答题获得的总积分为</div>
        </div>
    </div>
</template>

<script>
import { getrecordList } from "@/api/learningSituation/index";
export default {
    components: {},
    props: {},
    data() {
        return {
            ranking_list: {
                // 今日学情列表
                question_num: 0,
                accuracy: 0,
                duration: 0
            },
            oldrank_list: {
                // 昨日学情列表，默认给他们为0
                question_num: 0,
                accuracy: 0,
                duration: 0
            }
        };
    },
    computed: {},
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
        // 昨天凌晨时间戳- 现在时间时间戳
        let date = new Date();
        date.setHours(24);
        date.setMinutes(0);
        date.setSeconds(0);
        let start_time = parseInt(date.getTime() / 1000) - 86400 * 2;
        let end_time = parseInt(new Date().getTime() / 1000);
        // 获取昨天-今日学情
        getrecordList({
            start_time: start_time,
            end_time: end_time
        }).then(res => {
            if (res.code === 200) {
                this.ranking_list = res.data[0];
                this.ranking_list.duration = (
                    this.ranking_list.duration / 3600
                ).toFixed(1);
                // 返回的正确率要*100来按照百分比计算,如 0.3 就等于33%
                this.ranking_list.accuracy = parseInt(
                    this.ranking_list.accuracy * 100
                );
                // 大于1 表示有昨日学期
                if (res.data.length > 1) {
                    this.oldrank_list = res.data[1];
                    this.oldrank_list.duration = (
                        this.oldrank_list.duration / 3600
                    ).toFixed(1);
                    this.oldrank_list.accuracy = parseInt(
                        this.oldrank_list.accuracy * 100
                    );
                }
            }
        });
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
    },
    methods: {
        checkRanking() {
            this.$message({
                message: "暂无开启",
                type: "warning"
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.content-flex-right {
    flex-grow: 0;
    width: 384px;
    margin-left: 24px;
}
.bodyRightTop {
    width: 100%;
    height: 335px;
    background: #ffffff;
    box-shadow: 0px 12px 48px rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    position: relative;
    .checkRanking {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        height: 48px;
        line-height: 48px;
        background: #f5fcff;
        border-radius: 0px 0px 8px 8px;
        font-size: 22px;
        color: #18db60;
        cursor: pointer;
    }
}
.rightTopBody {
    padding: 24px;
    box-sizing: border-box;
    .topStateTitle {
        text-align: center;
        font-size: 22px;
        color: #2d3440;
    }
    .topStateBox {
        display: flex;
        justify-content: space-between;
        text-align: center;
        margin-top: 28px;
        .topStateNum {
            flex: 1;
            font-size: 42px;
            font-weight: bold;
            color: #18db60;
            position: relative;
            .iconImg {
                width: 24px;
                height: 24px;
                position: absolute;
                right: -20px;
                bottom: 13px;
            }
        }
        .topStateNum1 {
            flex: 1;
            font-size: 42px;
            font-weight: bold;
            color: #ffa442;
            position: relative;
            .iconImg {
                width: 24px;
                height: 24px;
                position: absolute;
                right: -20px;
                bottom: 13px;
            }
        }
    }
}

.topStateSubText {
    font-size: 12px;
    font-weight: normal;
    color: #9ea4b0;
}
.topStateTitle2 {
    font-size: 16px;
    font-weight: normal;
    color: #6d7785;
    margin-top: 20px;
}
.topStateBox2 {
    display: flex;
    text-align: center;
    margin-top: 12px;
    .topStateBoxItem {
        margin-right: 20px;
        .topStateNum2 {
            font-size: 32px;
            font-weight: bold;
            color: #dadfe6;
        }
    }
}

.bodyRightbottom {
    width: 100%;
    background: #ffffff;
    height: 164px;
    margin-top: 24px;
    box-shadow: 0px 12px 48px rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    padding: 24px;
    box-sizing: border-box;
    .addBranchBox {
        text-align: center;
        position: relative;
        .branchImg1 {
            width: 11px;
            height: 11px;
            position: absolute;
            left: 90px;
            top: 30px;
            opacity: 0.5;
        }
        .branchImg2 {
            width: 23.88px;
            height: 23.88px;
            position: absolute;
            right: 90px;
            top: 40px;
        }
        .addText {
            font-size: 32px;
            font-weight: bold;
            color: #18db60;
        }
        .addBranchNum {
            font-size: 68px;
            font-weight: bold;
            color: #18db60;
        }
    }
    .allBranch {
        font-size: 15px;
        color: #2d3440;
        font-weight: 600;
        margin-top: 15px;
    }
}
</style>
